<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="500"
      draggable
      @close="reset"
    >
      <div>
        <el-form
          style="max-width: 600px"
          :model="formData"
          label-width="auto"
          :label-position="left"
          size="500"
        >
          <el-form-item label="角色名称">
            <el-input v-model="formData.roleName" />
          </el-form-item>
          <el-form-item label="权限字符">
            <el-input v-model="formData.roleKey" />
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="formData.status">
              <el-radio value="1">正常</el-radio>
              <el-radio value="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="菜单权限">
            <el-tree
              :data="props.roleList"
              show-checkbox
              @check-change="onClick"
              node-key="menuId"
              ref="treeRef"
              :props="treeProps"
              :default-checked-keys="selectChange"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="reset">取消</el-button>
          <el-button type="primary" @click="onSubmit" :loading="loading">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineExpose, defineProps, defineEmits } from "vue";
import { ElTree } from "element-plus";

const dialogVisible = ref(false);
const loading = ref(false);
const treeRef = ref();

const props = defineProps({
  roleList: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["common"]);

const selectChange = ref([]);

const treeProps = ref({
  label: "menuName",
  children: "children",
});

const formData = ref({
  id: null,
  roleName: "",
  roleKey: "",
  status: 0,
  sysMenuList: [],
});

const title = ref("新增角色");

// a-传递的对象，b-节点本身是否选中，c-节点字节点是否有被选中
const onClick = (a, b, c) => {
  if (b || c) {
    selectChange.value.push(a["menuId"]);
  } else {
    selectChange.value.splice(selectChange.value.indexOf(a["menuId"]), 1);
  }
  console.log(selectChange.value, c);
};

const onSubmit = () => {
  loading.value = true;
  formData.value.sysMenuList = selectChange.value;
  emits("common", formData.value);
  setTimeout(() => {
    loading.value = false;
    dialogVisible.value = false;
    selectChange.value = [];
    reset();
  }, 500);
};

const open = (item, type) => {
  dialogVisible.value = true;
  if (type == 1) {
    // 修改
    console.log(item);
    title.value = "修改角色";
    formData.value.id = item.roleId;
    formData.value.roleName = item.roleName;
    formData.value.roleKey = item.roleKey;
    formData.value.status = item.status.toString();
    selectChange.value = item.sysMenuList;
    console.log("选中的节点", selectChange.value, item.sysMenuList);
  }
};

const reset = () => {
  formData.value = {
    id: null,
    roleName: "",
    roleKey: "",
    status: 0,
    sysMenuList: [],
  };
  selectChange.value = [];
  treeRef.value.setCheckedKeys([]);
  dialogVisible.value = false;
};

defineExpose({
  open,
});
</script>

<style></style>
